<template>
  <div class="newQueryMain">
    <div class="newQueryBox">
      <div class="lineNum">
        <b>1</b>
        <b>2</b>
        <b>3</b>
      </div>
      <div class="newQueryTextArea">
        <textarea placeholder="请输入查询语句" v-model="sql"></textarea>
        <div class="queryResult" :style="{bottom: showList ? '10px' : '-205px'}">
          <el-table :data="data" border>
            <el-table-column v-for="item in columns" :key="item.label" :prop="item.label" :label="item.label" align="center">
              <template slot-scope="scope">
                <el-input size="small" v-model="data[scope.$index][item.label]" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

    </div>
    <div class="btnGroup flex align-center">
      <el-button size="mini" type="primary" icon="el-icon-caret-right" @click="showList = true; sql = 'SELECT * FROM table_name WHERE user_name IN (\'admin\', \'ry1\');'">执行</el-button>
      <el-button size="mini" icon="el-icon-magic-stick">格式化代码</el-button>
      <el-button size="mini" type="primary" icon="el-icon-delete" plain @click="showList = false; sql = ''">清空</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'NewQuery',
  data() {
    return {
      sql: "SELECT * FROM table_name WHERE user_name IN ('admin', 'ry1');",
      data: [
        {
          user_id: 1,
          dept_id: 103,
          user_name: "admin",
          nick_name: "管理员",
          user_type: "00",
          email: "ry@163.com",
          phonenumber: 15888888888,
          sex: 1,
        },
        {
          user_id: 1,
          dept_id: 105,
          user_name: "ry1",
          nick_name: "用户9",
          user_type: "00",
          email: "ry@qq.com",
          phonenumber: 1566666666,
          sex: 1,
        }
      ],
      columns: [{
        label: "user_id"
      }, {
        label: "dept_id"
      }, {
        label: "user_name"
      }, {
        label: "nick_name"
      }, {
        label: "user_type"
      }, {
        label: "email"
      }, {
        label: "phonenumber"
      }, {
        label: "sex"
      }, {
        label: "avatar"
      }, {
        label: "password"
      }],
      showList: false
    }
  }
}
</script>
<style lang="scss" scoped>
.newQueryMain{
  height: 100%;
  .newQueryBox{
    height: calc(100% - 40px);
    position: relative;
    .lineNum{
      width: 10px;
      height: calc(100% - 10px);
      position: absolute;
      left: 0;
      top: 0;
      background: #f1f1f1;
      padding-top: 10px;
      box-sizing: border-box;
      b{
        font-size: 12px;
        display: block;
        margin: 0 auto;
        text-align: center;
        line-height: 22px;
      }
    }
    .newQueryTextArea{
      width: calc(100% - 20px);
      height: calc(100% - 10px);
      position: absolute;
      left: 20px;
      top: 0;
      border: 1px solid #f1f1f1;
      box-sizing: border-box;
      padding: 10px;
      overflow: hidden;
      textarea{
        width: 100%;
        height: 100%;
        resize: none;
        border: none;
        background: none;
        font-weight: bold;
      }
    }
    .queryResult{
      width: calc(100% - 20px);
      height: 195px;
      position: absolute;
      left:10px;
      bottom: -205px;
      border: 1px solid #f1f1f1;
      box-sizing: border-box;
      padding: 10px;
      transition: all 0.2s;
    }
  }
  .btnGroup{
    height: 40px;
    background: #f1f1f1;
    padding: 0 10px;
  }
}
</style>
